import React, { useState } from "react";
import "./HotMusic.scss";
import { ResHotMusic } from "../../../../api";
import { useEffect } from "react";
import { upDateTime } from "../../../../utils/date_utils.js";
import { Link } from "react-router-dom";
import { PlayCircleOutlined } from "@ant-design/icons";

export default function HotMusic() {
  let [list, setList] = useState([]);
  let [time, setTime] = useState("");
  useEffect(async () => {
    try {
      const { playlist } = await ResHotMusic();
      const { tracks } = playlist;
      const song = tracks.filter((item, index) => {
        return index < 20;
      });
      setList(song);
      setTime(upDateTime(playlist.updateTime));
    } catch (error) {
      console.log(error);
    }
  }, []);
  return (
    <div id="hotMusic">
      <div className="HotMusicModule">
        <div className="musicRankImg">
          <div className="imgHotRank"></div>
          <h6>{time}</h6>
        </div>
        <div className="musicRank">
          {list.map((item, index) => {
            return (
              <Link
                className="hotSingle"
                to="/song"
                key={item.id}
                // style={{ width: "100%", height: "50px" }}
              >
                <div className={index < 3 ? "topThree" : "number"}>
                  {index + 1}
                </div>
                <div className="name">
                  <div className="music">{item.name}</div>
                  <div className="singer">
                    <i className={(item.cd.length==2?'quality':'')}></i>
                    <div className="album">
                      {`${item.ar[0].name}-${item.name}`}
                    </div>
                  </div>
                </div>
                <div className="playIcon">
                  <PlayCircleOutlined />
                </div>
              </Link>
            );
          })}
        </div>
      </div>
    </div>
  );
}
